import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, Flex, Card, Icon, Tabs, Badge, List, Carousel, WingBlank, Button } from 'antd-mobile'
import { Link } from 'react-router-dom'
import HomeNavBar from '@/common/components/displays/HomeNavBar'
import { Chart, Line, Axis, Interval, Area, Legend } from 'ant-design-mobile-chart'

import '@/common/style/ui.less'
import '@/common/style/agencyInfo.less'
const Item = List.Item;
const Brief = Item.Brief;
const tabs = [
    {
        title: <Badge><p>Diamond</p>
            <p>28897</p>
        </Badge>,
    },
    {
        title: <Badge>
            <p>Active Talent</p>
            <p>28897</p>
        </Badge>
    },
    {
        title: <Badge dot>
            <p>New Talent</p>
            <p>28897</p>
        </Badge>
    },
];
class AgencyInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: ['1', '2', '3'],
            imgHeight: "100px",
            sun: "pengwei",
            intervalData: [{
                year: '1951 年',
                sales: 38
                }, {
                    year: '1952 年',
                    sales: 52
                }, {
                    year: '1956 年',
                    sales: 61
                }, {
                    year: '1957 年',
                    sales: 145
                }, {
                    year: '1958 年',
                    sales: 48
                }, {
                    year: '1959 年',
                    sales: 38
                }, {
                    year: '1960 年',
                    sales: 38
                }, {
                    year: '1962 年',
                    sales: 38
            }],
            Areadata: [{
                time: '2016-08-08 00:00:00',
                tem: 10
              }, {
                time: '2016-08-08 00:10:00',
                tem: 22
              }, {
                time: '2016-08-08 00:30:00',
                tem: 16
              }, {
                time: '2016-08-09 00:35:00',
                tem: 26
              }, {
                time: '2016-08-09 01:00:00',
                tem: 12
              }, {
                time: '2016-08-09 01:20:00',
                tem: 26
              }, {
                time: '2016-08-10 01:40:00',
                tem: 18
              }, {
                time: '2016-08-10 02:00:00',
                tem: 26
              }, {
                time: '2016-08-10 02:20:00',
                tem: 12
              }],
              itemData : [
                {
                    id: 1,
                    name: "Talent Name",
                    time: "Inactive 2 weeks",
                    extraData: "status",
                    thumb: require("../../images/thumbUsericon.png")
                },
                {
                    id: 2,
                    name: "Talent Ranking",
                    time: "Inactive 2 weeks",
                    extraData: "status",
                    thumb:require("../../images/thumbUsericon.png")
                }
            ]
        }
    }

    talanthandle = () => {
        this.props.history.push("/talant")
    }
    render() {
        return (
            <div className="agency-info">
                <HomeNavBar leftTitle={'AgencyName'}/>
                <List className="my-list SomeDescription">
                    <Item extra={'>>'}>Some Incentive Description</Item>
                </List>
                <Card className="talantInfo">
                    <WingBlank>
                    <Card.Body>
                        <Flex className='bgWhite talantInfoGrid'>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <img src={require('../../images/person02.jpg')} alt='' />
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Diamond</span>
                                    <span className='number'>28897</span>
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Performance</span>
                                    <span className='number'>28897</span>
                                </Flex>
                            </Flex.Item>
                            <Flex.Item>
                                <Flex direction='column'>
                                    <span className='title'>Level</span>
                                    <span className='number'>28897</span>
                                </Flex>
                            </Flex.Item>
                        </Flex>
                    </Card.Body>
                    </WingBlank>
                </Card>
                <div className="chart-container">
                    <Chart
                        width="370"
                        height="180"
                        source={this.state.intervalData} 
                        pixelRatio={window.devicePixelRatio}>
                        {/* 柱形图 */}
                        <Interval position="year*sales" color="rgba(172, 51, 193, .9)" adjust="stack"/>
                    </Chart>
                    <span className="btn-more">More</span>
                </div>
                <WhiteSpace />
                <div className="talents-content">
                    <div className="talent-left">
                        <img className="chart-icon" src={require("../../images/chart-arrow.png")}/>
                        <ul className="chart-desc">
                            <li>
                                <span className="desc-title">New Talents</span>
                                <span className="desc-num">28897</span>
                            </li>
                            <li>
                                <span className="desc-title">New Talents</span>
                                <span className="desc-num">28897</span>
                            </li>
                            <li>
                                <span className="desc-title">New Talents</span>
                                <span className="desc-num">28897</span>
                            </li>
                        </ul>
                        <Chart source={this.state.Areadata} width="350" height="100" pixelRatio={window.devicePixelRatio}>
                            <Area position="time*tem" color='rgba(172, 51, 193, 1)' shape="smooth" />
                            <Line position="time*tem" color="rgba(172, 51, 193, 1)" shape="smooth" />
                            <Axis field="time" enable={false}/>
                            <Axis field="tem" enable={false}/>        
                        </Chart>
                    </div>
                    <div className="talent-right">
                        <div className="info-list">
                            <p className="info-title">&gt;60H Talents</p>
                            <p className="info-number">28897</p>
                        </div>
                        <div className="info-list">
                            <p className="info-title">&gt;60H New Talents </p>
                            <p className="info-number">28897</p>
                        </div>
                        <div className="info-list">
                            <p className="info-title">&lt;500KD Active Talents</p>
                            <p className="info-number">28897</p>
                        </div>
                    </div>
                </div>
                <List renderHeader={() => 'Talent Apply List'} className="my-list">
                {
                    this.state.itemData.map((item,index)=>
                        <Item
                            key={index}
                            extra={item.extraData}
                            arrow="horizontal"
                            thumb={<div><img src={item.thumb} style={{
                                display:"inline-block",
                                marginLeft:'12px',
                                width:"55px",
                                height:"55px",
                                borderRadius:"50%"
                            }}/></div>}
                            multipleLine
                            onClick={() => {this.linkHandle()}}
                        >
                            {item.name} <span>level</span><Brief>{item.time}</Brief>
                        </Item>
                    )
                }
                </List>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

export default connect(mapStateToProps)(AgencyInfo);
